<template>
  <div class="main">
    <van-nav-bar
      :title="community"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      class="green"
    />
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in imgsGroup" :key="index">
        <img v-lazy="item.imgSrc" />
      </van-swipe-item>
    </van-swipe>
    <div class="wrapper">
      <p>{{ title }}</p>
      <van-tag type="success">{{ tag }}</van-tag>
      <hr />

      <van-row type="flex" justify="space-between" class="red row_left">
        <van-col span="6">{{ price }}/月</van-col>
        <van-col span="6">{{ roomType }}</van-col>
        <van-col span="6">{{ size }}平米</van-col>
      </van-row>
      <van-row type="flex" justify="space-between" class="fontSmall row_left">
        <van-col span="6">租金</van-col>
        <van-col span="6">房型</van-col>
        <van-col span="6">面积</van-col>
      </van-row>

      <hr />
      <div class="spec">
        <div class="left">
          <p>装修: <span>精装</span></p>
          <p>
            楼层: <span>{{ floor }}</span>
          </p>
        </div>
        <div class="right">
          <p>
            朝向: <span>{{ oriented }}</span>
          </p>
          <p>类型: <span>普通住宅</span></p>
        </div>
      </div>
      <div class="house_location">
        <div class="house_community">小区: {{ community }}</div>
        <!-- 地图模块 -->
        <div class="house_map">
          <baidu-map class="bm-view" :center="center" :zoom="zoom">
            <!-- 定位插件 -->
            <bm-geolocation
              anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
              :showAddressBar="true"
              :autoLocation="true"
            ></bm-geolocation>
          </baidu-map>
          <!-- 地图模块 -->
        </div>
        <div class="house_support">房屋配套:{{ supporting.join(',') }}</div>
        <hr />
      </div>
      <div class="house_detail">
        <div class="house_title">房源概况</div>
        <hr />
        <div class="house_content">
          <div class="house_detail_left">
            <van-image
              round
              width="10rem"
              height="10rem"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
              cover
            />
            <div class="user_info">
              <div class="master">王女士</div>
              <div>
                <van-icon name="shield-o" />
                <span>已认证房主</span>
              </div>
            </div>
          </div>
          <div class="house_detail_right">
            <van-tag plain type="primary" size="large">发消息</van-tag>
          </div>
        </div>
        <div class="house_desc">
          1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
          2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
          3.人车分流，环境优美。
          4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
        </div>
      </div>
      <div class="house_recommend">
        <div class="house_title">猜你喜欢</div>
        <hr />
        <div class="house_item">
          <div class="left">
            <img src="http://liufusong.top:8080/img/message/1.png" alt="" />
          </div>
          <div class="right">
            <h3>安贞西里 3室1厅</h3>
            <div class="desc">72.32㎡/南 北/低楼层</div>
            <van-tag color="#E1F5F8" text-color="#39BECD">随时看房</van-tag>
            <div class="price"><span>4500 </span>/月</div>
          </div>
        </div>
        <hr />
        <div class="house_item">
          <div class="left">
            <img src="http://liufusong.top:8080/img/message/2.png" alt="" />
          </div>
          <div class="right">
            <h3>天居园 2室1厅</h3>
            <div class="desc">83㎡/南/高楼层</div>
            <van-tag color="#E1F5F8" text-color="#39BECD">近地铁</van-tag>
            <div class="price"><span>7200 </span>/月</div>
          </div>
        </div>
        <hr />
        <div class="house_item">
          <div class="left">
            <img src="http://liufusong.top:8080/img/message/3.png" alt="" />
          </div>
          <div class="right">
            <h3>角门甲4号院 1室1厅</h3>
            <div class="desc">52㎡/西南/低楼层</div>
            <van-tag color="#E1F5F8" text-color="#39BECD">集中供暖</van-tag>
            <div class="price"><span>4300 </span>/月</div>
          </div>
        </div>
        <hr />
      </div>
      <br />
      <br />
      <br />

      <van-tabbar v-model="active">
        <van-tabbar-item icon="star-o" @click="favourite" v-show="!isFavorites"
          >收藏</van-tabbar-item
        >
        <van-tabbar-item
          icon="star"
          @click="removefavourite"
          v-show="isFavorites"
          >取消收藏</van-tabbar-item
        >
        <van-tabbar-item
          ><strong class="bigger">在线咨询</strong></van-tabbar-item
        >
        <van-tabbar-item class="phone">电话预约</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import { getHousesDetail } from '@/api/house'
import { addFavorites, isFavorites, delFavorites } from '@/api/user'
export default {
  name: 'house_detail',
  data () {
    return {
      active: 0,
      list: [],
      isFavorites: true,
      houseCode: this.$route.query.houseCode,
      title: '',
      tag: '',
      price: '0', // 房价
      community: '', // 小区
      roomType: '', //房型
      size: '', // 面积
      supporting: [], // 配套
      floor: '', // 楼层
      oriented: '', //朝向
      imgsGroup: [],
      center: { lng: 116.404, lat: 39.915 },
      zoom: 12,
      images: [
        'http://liufusong.top:8080/img/swiper/2.png',
        'http://liufusong.top:8080/img/swiper/1.png'
      ]
    }
  },
  async created () {
    const { body } = await getHousesDetail(this.houseCode)
    const data = await isFavorites(this.houseCode)
    console.log(body)
    this.isFavorites = data.body.isFavorites
    this.title = body.title
    this.tag = body.tags[0]
    this.price = body.price
    this.community = body.community
    this.roomType = body.roomType
    this.size = body.size
    this.supporting = [...body.supporting]
    this.floor = body.floor
    this.oriented = body.oriented[0]
    this.center.lng = body.coord.longitude
    this.center.lat = body.coord.latitude
    this.imgsGroup = [...body.houseImg]
    this.imgsGroup = this.imgsGroup.map(item => {
      return {
        imgSrc: 'http://liufusong.top:8080' + item
      }
    })
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    async favourite () {
      await addFavorites(this.houseCode)
      this.$toast.success('已添加至收藏')
    },
    async removefavourite () {
      await delFavorites(this.houseCode)
      this.$toast('已取消收藏')
    }
  }
}
</script>

<style scoped lang="less">
.main {
  height: auto;
  .house_detail {
    .house_content {
      display: flex;
      justify-content: space-between;
      padding: 20px 0 10px 0;
      height: 70px;
      .house_detail_left {
        display: flex;
        .user_info {
          margin-top: 10px;
          margin-left: -90px;
          .master {
            font-size: 14px;
          }
          /deep/.van-icon-shield-o {
            color: rgb(250, 87, 65);
          }
          span {
            font-size: 12px;
            color: rgb(250, 87, 65);
          }
        }
      }
      .house_detail_right {
        .van-tag--large {
          margin-top: 15px;
        }
      }
    }
    .house_desc {
      font-size: 14px;
      color: #333;
    }
    /deep/.van-image__img {
      height: 52px;
      width: 52px;
    }
  }
  .house_recommend {
    .house_title {
      margin: 10px 0;
    }
    .house_item {
      padding: 18px 0 13px 0;
      display: flex;
      .right {
        display: flex;
        flex-direction: column;
        padding-left: 12px;
        h3 {
          margin-top: 0px;
          font-size: 15px;
        }
        .desc {
          font-size: 12px;
          margin-top: -10px;
          color: #afb2b3;
        }
        .van-tag--default {
          margin: 5px 0;
          width: 50px;
        }
        .price {
          font-size: 12px;
          color: red;
          span {
            font-size: 16px;
          }
        }
      }
      img {
        width: 106px;
        height: 80px;
      }
    }
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  width: 100%;
  height: 252px;
}
.spec {
  display: flex;
  p {
    font-size: 13px;
    color: #999;
    span {
      color: #333;
    }
  }
  .left {
    margin-right: 100px;
  }
}
.row_left {
  margin-left: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.van-tabbar-item {
  border-right: 1px solid #e8e8e9;
  border-top: 1px solid #e8e8e9;
}
/deep/.van-nav-bar__content {
  background-color: #21b97a;

  .van-nav-bar__title {
    color: #fff;
    font-size: 18px;
  }
  .van-icon-arrow-left {
    color: #fff;
  }
}
.phone {
  background-color: #21b97a;
  color: #fff;
  font-size: 17px;
}
.red {
  color: red;
  font-weight: 700;
}
.bigger {
  font-size: 17px;
  color: #999;
  font-weight: 400;
}
.wrapper {
  margin: 0 auto;
  width: 90%;
}
.fontSmall {
  font-size: 14px;
  color: darkgray;
}
.house_location {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .house_community,
  .house_support {
    padding: 10px 0;
    margin: 0 0 10px;
    font-size: 14px;
    color: #333;
    font-weight: 700;
  }
  // .house_map {
  //   height: 145px;
  // }
  .bm-view {
    width: 100%;
    height: 145px;
  }
}
</style>
